<template>
    <div class="animate-number">{{value}}</div>
</template>
<style lang="scss" scoped>
    .animate-number{
        display: inline;
    }
</style>
<script>
export default {
    name:"animate-number",
    props:{
        number:{
            type:Number,
            default:0,
        }
    },
    data(){
        return{
            value:0,
            t:null
        }
    },
    mounted(){
        if(this.number>this.value){
            const that = this;
            const t = setInterval(()=>{
                const a = Math.round(Math.random()*(parseInt(that.number/1200)-parseInt(that.number/2400))+parseInt(that.number/2400)) || Math.round(Math.random()*(2-1)+1);
                if(that.value + a < that.number){
                    that.value+=a;
                }else{
                    that.value = that.number;
                    clearInterval(t);
                }
            },50);
        }
    }
}
</script>